<script setup lang="ts">
import { ref, nextTick } from "vue";
import tree from "./tree.vue";
import { organizaHook } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import jobsTreeTransfer from "@/components/jobsTreeTransfer/index.vue";

import Role from "@iconify-icons/ri/admin-line";
import Password from "@iconify-icons/ri/lock-password-line";
import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Add from "@iconify-icons/ep/plus";
import Search from "@iconify-icons/ep/search";
import Close from "@iconify-icons/ep/close";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "User"
});

const showDrawer = ref(false);
const jobName = ref("");
const jobsTreeCom = ref(null);
const winHeight = ref(0);
const formRef = ref();
const {
  form,
  loading,
  jobsColumns,
  columns,
  dataList,
  treeData,
  pagination,
  buttonClass,
  jobsList,
  onSearch,
  resetForm,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = organizaHook();

function openDrawer(row) {
  showDrawer.value = true;
  nextTick(() => {
    handleDrawerHeight();
  });
}
function handleDrawerHeight() {
  // 获取窗口高度
  if (window.innerHeight) {
    winHeight.value = window.innerHeight;
  } else if (document.body && document.body.clientHeight) {
    winHeight.value = document.body.clientHeight;
  }
  // 通过深入 Document 内部对 body 进行检测，获取窗口大小
  if (document.documentElement && document.documentElement.clientHeight) {
    winHeight.value = document.documentElement.clientHeight;
  }
  //DIV高度为浏览器窗口高度 的60%
  document.getElementById("drawer").style.height = winHeight.value * 1 + "px";
}
function openJobsTree() {
  jobsTreeCom.value.onChangeVisible();
}
</script>

<template>
  <div class="main">
    <tree class="w-[17%] float-left" />
    <div class="float-right w-[81%]">
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="bg-bg_color w-[99/100] pl-8 pt-4"
      >
        <el-form-item label="组织名称：" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名称"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="组织编码：" prop="mobile">
          <el-input
            v-model="form.mobile"
            placeholder="请输入手机号码"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="父级编码：" prop="status">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            clearable
            class="!w-[160px]"
          >
            <el-option label="已开启" value="1" />
            <el-option label="已关闭" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon(Search)"
            :loading="loading"
            @click="onSearch"
          >
            查询
          </el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <PureTableBar title="" @refresh="onSearch">
        <!-- <template #buttons>
                  <el-button type="primary" :icon="useRenderIcon(AddFill)">
                    新增用户
                  </el-button>
                </template> -->
        <template v-slot="{ size, checkList }">
          <pure-table
            ref="tableRef"
            border
            align-whole="center"
            row-key="id"
            showOverflowTooltip
            table-layout="auto"
            default-expand-all
            :loading="loading"
            :size="size"
            :data="treeData"
            :columns="columns"
            :checkList="checkList"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(EditPen)"
                @click="handleUpdate(row)"
              >
                修改
              </el-button>
              <el-popconfirm title="是否确认删除?">
                <template #reference>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(Delete)"
                    @click="handleDelete(row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="openDrawer(row)"
              >
                岗位
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
    <transition name="fade">
      <div id="drawer" class="drawer_dialog" v-if="showDrawer">
        <div class="title">
          <div>岗位信息</div>
          <el-button circle @click="showDrawer = false">
            <el-icon><CloseBold /></el-icon>
          </el-button>
        </div>
        <div class="button_list">
          <el-input
            style="flex: 2; margin-right: 30%"
            v-model="jobName"
            placeholder="请输入岗位名称"
            clearable
          />
          <el-button
            type="primary"
            :icon="useRenderIcon(Search)"
            @click="onSearch"
            >搜索</el-button
          >
        </div>
        <PureTableBar title="" @refresh="onSearch" :needtool="false">
          <template v-slot="{ size, checkList }">
            <div style="margin-bottom: 8px">
              <el-button
                type="primary"
                :icon="useRenderIcon(AddFill)"
                @click="openJobsTree"
              >
                新增
              </el-button>
              <el-button type="danger" :icon="useRenderIcon(Delete)">
                删除
              </el-button>
            </div>
            <pure-table
              ref="tableRef"
              border
              align-whole="center"
              row-key="id"
              showOverflowTooltip
              table-layout="auto"
              default-expand-all
              :loading="loading"
              :size="size"
              :data="jobsList"
              :columns="jobsColumns"
              :checkList="checkList"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  @click="openDrawer(row)"
                >
                  人员
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </transition>
    <jobsTreeTransfer
      ref="jobsTreeCom"
      :isMulti="true"
      :isEmployee="true"
      :isMix="true"
    />
  </div>
</template>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  animation: move 0.3s;
}
.fade-enter,
.fade-leave-active {
  animation: move 0.3s reverse;
}
@keyframes move {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translate(0);
  }
}
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.drawer_dialog {
  width: 400px;
  background-color: #fff;
  position: fixed;
  right: 0px;
  z-index: 9;
  padding: 16px;
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);

  .title {
    display: flex;
    justify-content: space-between;
  }

  .button_list {
    display: flex;
    margin-top: 18px;
  }
}
</style>
